JS_based animation - zoom-in - zoom-out

Zoom In Zoom Out

code

			<div class="spec">
				<p>
					<button type="button" onclick="zoomin()"><img src="./images/zoom-in.png" width="10"> Zoom In</button>
					<button type="button" onclick="zoomout()"><img src="./images/zoom-out.jpg" width="10"> Zoom Out</button>
				</p>
				<img src="./images/2018-Sh-02.jpg" id="Shanghai" width="650" alt="Shanghai">
			</div>
			<script>
				function zoomin(){
					var myImg = document.getElementById("Shanghai");
					var currWidth = myImg.clientWidth;
					if(currWidth == 1500){
						alert("Maximum zoom-in level reached.");
					} else{
						myImg.style.width = (currWidth + 50) + "px";
					} 
				}
				function zoomout(){
					var myImg = document.getElementById("Shanghai");
					var currWidth = myImg.clientWidth;
					if(currWidth == 50){
						alert("Maximum zoom-out level reached.");
					} else{
						myImg.style.width = (currWidth - 50) + "px";
					}
				}	
			</script>